<template>
  <sys-layout class="sys-page">
    <template v-slot:top>
      <slot name="top">
        <sys-query v-if="showQuery" ref="query" :model="model" :labelWidth="labelWidth" @query="handleQuery"
                   v-bind="queryProps" v-on="$listeners">
          <template slot="action">
            <slot name="query_action"></slot>
          </template>
          <template slot="actionAppend">
            <slot name="actionAppend"></slot>
          </template>
          <slot name="form"></slot>
          <template slot="form-adv">
            <slot name="form-adv"></slot>
          </template>
          <template slot="toolBar">
            <slot name="toolBar"></slot>
          </template>
        </sys-query>
        <div class="sys-page-tool">
          <el-button icon="el-icon-plus" size="mini" type="primary" @click="$emit('add')" v-if="showAddBtn">新增
          </el-button>
          <slot name="tools"></slot>

          <div style="display: inline-block; margin-left: 5px;">
            <el-badge v-if="selectedAble" :value="shopList.length">
              <el-button size="mini" v-popover:popover>已选择</el-button>
            </el-badge>
          </div>
        </div>
      </slot>
    </template>

    <sys-table ref="table"
               border
               stripe
               size="mini"
               :columns="columns"
               :loader="loadFn"
               :pageSize="pageSize"
               :pagination="pagination"
               :rowKey="getRowKey"
               v-bind="tableProps"
               v-on="tableListeners"
               @selection-change="onSelectChange">
      <!-- element-table 列的插槽 -->
        <template v-for="(col) in columns" slot-scope="prop" :slot="col.prop" v-if="col.prop">
          <slot :name="col.prop" v-bind="prop">
            {{ prop.row[col.prop] }}
          </slot>
        </template>
    </sys-table>
    <slot></slot>

    <simple-dialog v-bind.sync="dialog" @on-ok="onDialogOk"/>


    <el-popover
        ref="popover"
        trigger="click"
        placement="right"
        :popper-class="popperClass"
    >
      <div class="sys-page-popover">
        <sys-table border :columns="currSelectedColumns" :data="shopList" size="mini">
          <template v-slot:ctrl="{row, $index}">
            <el-button type="text" size="mini" icon="el-icon-delete" @click="onRemove(row, $index)">移除</el-button>
          </template>
        </sys-table>
      </div>
    </el-popover>
  </sys-layout>
</template>

<script>
import sysLayout from './sys-layout'
import sysQuery from './sys-query2'
import sysTable from './sys-table'


export default {
  name: 'sys-page',
  cnName: 'sys-page',
  components: {
    sysLayout,
    sysQuery,
    sysTable
  },
  props: {
    model: Object,
    labelWidth: String,
    showQuery: {
      type: Boolean,
      default: true
    },
    beforeQuery: Function,
    queryProps: {
      type: Object
    },
    columns: Array,
    loader: {
      type: Function,
      required: true
    },
    selectedAble: {
      type: Boolean,
      default: false
    },
    tableProps: {
      type: Object
    },
    tableListeners: {
      type: Object
    },
    pageSize: {
      type: Number,
      default: 10
    },
    pagination: {
      type: Object,
      default() {
        return {
          background: true,
          layout: 'total, sizes, ->, prev, pager, next'
        }
      }
    },
    showAddBtn: {
      type: Boolean,
      default: false
    },
    popperClass: String,
    selectedColumnsRange: {
      type: Array,
      default() {
        return [1, 3]
      }
    },
    selectedColumns: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      dialog: {
        title: '',
        visible: false,
        comp: null,
        width: '60%',
        height: '50%',
        props: {}
      },
      shopList: []
    }
  },
  methods: {
    reload() {
      this.$refs.table && this.$refs.table.load()
    },
    async loadFn(page, pageSize) {
      const model = this.model
      const res = await this.loader({...model, page, limit: pageSize})
      if (res.page) {
        res.page.total = res.page.totalCount || res.page.total
        return res.page
      } else {
        res.total = res.totalCount || res.total
      }
      return res
    },
    handleQuery(model) {
      this.$emit('query', model)
      if (this.beforeQuery) {
        this.beforeQuery(model).then(() => {
          this.reload()
        })
      } else {
        this.reload()
      }
    },
    setDialog(options) {
      options.visible = true
      this.dialog = Object.assign({}, this.dialog, options)
    },
    onDialogOk(data) {
      this.dialog.visible = false
      this.$emit('dialog-ok', data)
      this.reload()
    },
    getRowKey(row) {
      return row.id
    },
    onSelectChange(selection) {
      console.info('change:', selection)
      this.$emit('selection-change', selection)
      this.shopList = selection
    },
    onRemove(row, index) {
      this.shopList.splice(index, 1)
      this.$refs.table.$refs.table.toggleRowSelection(row, false)
    }
  },
  computed: {
    currSelectedColumns() {
      if(this.selectedColumns) {
        return this.selectedColumns
      }
      const start = this.selectedColumnsRange[0]
      const end = this.selectedColumnsRange[1]
      const columns = this.columns.slice(start, end)
      columns.push({
        prop: 'ctrl',
        label: '操作',
        align: 'center'
      })
      return columns
    }
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.sys-page {
  padding: 0;
  border: 5px solid #f0f0f0;

  &-tool {
    padding: 8px;
  }

  &-popover {
    min-width: 400px;
    max-height: 400px;
    overflow: auto;
  }
}
</style>
